.header{
height: 100px;
width: 100%;
background-color: #fff;
}
.w{
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}
.head .logo{
    float: left;
    width: 221px;
    height: 100%;
    background: url(../img/logo.png) no-repeat center ;
}
.head .nav{
    float: right;
    height: 100%;
}
.head .nav-item{
float: left;
width:108px;
line-height: 100px;
font-size: 14px;
text-align: center;
}
.head .nav-item a{
    display: block;
    color: #767676;
  margin: 0 auto;
}
.head .nav-item .line{
    display: block;
    height: 1px;
    width: 20px;
    background-color: #668aca;
    margin: 0 auto;
    margin-top: -35px;
    opacity: 0;
}
.head .nav-item:hover .line{
    opacity: 1;
}
.head .nav-item:hover a{
    text-align: center;
    color: #668aca;
    font-size: 18px;
    
}
.banner{
height: 700px;
width: 100%;
background-color: skyblue;
}
.banner{
    position: relative;
    background: url(../img/banner1.jpg)no-repeat;
    background-size: cover;
    background-position:center;
}
/* 圆点 */
.dot{
    position: absolute;
bottom: 19px;
left: 50%;
margin-left: -60px;

}
.dot span{
    float: left;
    width: 8px;
    height: 8px;
    border:3px solid transparent;
    background-color: #ffffff;
    background-clip: content-box;
    margin: 0 5px;
    border-radius: 50%;
    cursor: pointer;
}
.dot span:hover{
    border-color: #fff;
    background-color: #668aca;
}
.dot span.active {
    background-color: #668aca;
    border-color: #fff;
  }

/* 项目展示 */

.title h2{
    font-size: 30px;
    color: #767676;
}
.title p{
    font-size: 12px;
    margin: 6px 0;
    color: #767676;
}
.title .line-l{
    width: 60px;
    height: 1px;
    background-color: #a1a1a1;
    float: left;
}
.title .line-r{
    width: 300px;
    height: 1px;
    background-color: #a1a1a1;
    float: right;
}
.project {
    width: 100%;
    height: 573px;
    background-color: #fff;
    margin-top: 120px;
  }
  /* 小导航 */
  .project-nav{
   margin: 0 auto;
   height: 85px;
   margin-top: 60px;
   width: fit-content;
  }
  .pr-item{
      float: left;
      width: 99px;
      
      line-height: 100%;
    
      text-align: center;
  }
  .pr-item a{
      color: #767676;
      font-size: 14px;
  }
  .project-nav .d3{
      display: block;
      float: left;
      height: 8px;
      width: 1px;
      background-color: #b5b5b5;
      margin: 6px 26px;
    }
    /* 小导航的下划线 */
     .pr-line {
        display: block;
        width: 20px;
        height: 1px;
        background-color: #668aca;
        margin: 0 auto;
        margin-top: 3px;
        opacity: 0;
        margin-bottom: 54px;
      }
      
    .pr-item:hover a {
        color: #668aca;
        font-size: 16px;
      }
      .pr-item:hover .pr-line {
        opacity: 1;
      }
      /* 激活样式 */
      .header .nav-item.active a {
        font-size: 18px;
        color: #668aca;
      }
      .header .nav-item.active .line {
        opacity: 1;
      }

      /* 小卡片 QWQ*/
      .home{
        height: 270px;
        width: 100%;
        
      }
      .card{
        float: left;
        position: relative;
        width: 360px;
        height: 270px;
        color: #767676;
       margin-right: 60px;
      

      }
      .home .mr1{
        margin-right: 0;
      }
      .card img{
        display: block;
        width: 360px;
        height: 180px;
      }
      .card .info{
        position: relative;
        margin-left: 50px;
        padding-top: 28px;
      }
      .card .city{
        font-size: 14px;
        line-height: 14px;
        margin-bottom: 7px;
      }
      .card .desc{
        font-size: 12px;
        line-height: 13px;
      }
      .card .info .icon{
        position: absolute;
        right: 50px;
        top:30px;
        width: 30px;
        height: 30px;
        background: url(../img/btn.png);
      }
      /* 小卡片的遮罩层QAQ */
      .mask{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color:rgba(0,0,0,.5);
        border-radius: 8px;
        color: #fff;
        opacity: 0;
      }
      .mask .t1{
        font-size: 14px;
        line-height: 15px;
        margin-top: 58px;
        margin-left: 50px;
        margin-bottom: 4px;
      }
      .mask .t2{
        font-size: 12px;
        line-height: 12px;
        margin-bottom: 14px;
        margin-left: 50px;
      }
      .mask .t3{
        font-size: 12px;
        margin-left: 50px;
      }
      .mask .icon{
        position: absolute;
        right: 50px;
        bottom: 60px;
        width: 38px;
        height: 38px;
        background: url(../img/btn-1.png) no-repeat center;
      }
      .card:hover .mask{
        opacity: 1;
      }
      .card:hover .info{
        opacity: 0;
      }
      .card:hover img{
        height: 100%;
      }
  .product {
    width: 100%;
    height: 1171px;
  }
  /* 五个透明小卡片 */
  .pro-nav{
    width: fit-content;
    height: 114px;
    margin: 0 auto;
 margin-top: 54px;
  }
  .pro-nav-item{
    float: left;
    width: 164px;
    margin: 0 20px;
  }
  .pro-nav .img{
    width: 100%;
    height: 86px;
    background: url(../img/tm1.png) no-repeat center;
    border-radius: 5px;
  }
 .pro-nav-item p{
    line-height: 16ox;
    margin-top: 7px;
    text-align: center;
  }
  .pro-nav .cn{
    font-size: 14px;
  }
  .pro-nav .en{
    font-style: 12px;
  }
  /* 五卡片的下划线 */
  .pro-line{
    display: block;
    width: 16px;
    height: 1px;
    background-color: #668aca;
    margin: 0 auto;
    margin-top: 4px;
    opacity: 0;
    margin-bottom: 110px;
  }
  .pro-nav-item:hover .cn{
    font-size: 16px;
  }
  .pro-nav-item:hover .en{
    font-size: 14px;
  }
  .pro-nav-item:hover .pro-line{
    opacity: 1;
  }
  .pro-nav-item:hover .img{
    background-color: #668aca;
  }
  .pro-nav-item:hover p{
    color: #668aca;
  }
  /* 好大的床 */
  .z-bed{
    width: 100%;
    height: 360px;
    margin-top: 110px;
  }
  .bed-item{
    float: left;
    position: relative;
    width: 360px;
    height: 360px;
    margin-right: 60px;
  }
  .mr3{
    margin-right: 0;
  }
.bed-item img{
  display: block;
  width: 303px;
  height: 303px;
  margin-left: 31px;
  margin-top: 29px;
  border-radius: 8px;
}
.bed-mask{
  position: absolute;
  display: none;
  left: 0;
  top: 20px;
  width: 360px;
  height: 320px;
  background-color: rgba(0,0,0,.5);
  border-radius: 8px;
}
.bed-mask span{
  display: block;
  width: 80px;
  height: 1px;
  background-color: #fff;
}

.bed-text{
  color: #f8f8f8;
}
.bed-item .bed-text .top{
  font-size: 30px;
  width: 25px;
  height: 23px;
  line-height: 25px;
  margin-top: 131px;
  margin-left: 84px;
}
.bed-item .center{
  font-size: 16px;
  margin-bottom: 10px;
  width: 221px;
}
.bed-item .bottom{
  font-size: 14px;
  line-height: 14px;
}
.text-bottom{
  margin-left: 69px;
  margin-top: 16px;
}

.bed-item .letter{
  width: 154px;
  height: 40px;
  color: #767676;
  margin: 0 auto;
}
.bed-item .letter .top{
  font-size: 16px;
}
.bed-item .letter .bottom{
  font-size: 14px;
}
.bed-item:hover .bed-mask{
  display: block;
}
.bed-item:hover .letter{
  display: none;
}
  .service {
    /* width: 100%;
    height: 932px; */
    height: 700px;
    width: 100%;
    background-color: skyblue;
        background: url(../img/night.jpg)no-repeat;
        background-size: cover;
        margin-bottom: 120px;
  }
  .s1{
    margin-bottom: 60px;
  }
  .service-c{
    width: 1200px;
    height: 932px;
  }
  .banner2{
    position: relative;
    width: 100%;
    height: 700px;
  }
.b2-text{
  position: absolute;
  top: 150px;
  left: 0;
  color: #fff;
  font-size: 30px;
}
.banner2 .x{
  position: absolute;
  top: 215px;
  left: 0;
  color: #fff;
}
.b2-cn{
  font-size: 14px;
  margin-bottom: 8px;
}
.b2-en{
  font-size: 14px;
}
/* 四个需要JS的小变色盒子 */
.b2-line{
  position: absolute;
  right: 3px;
  bottom: 149px;
  width: fit-content;
  height: 150px;
  margin: 0 auto;
}
.b2-d4{
  position: relative;
  float: left;
  height: 149px;
  width: 249px;
  border: 1px solid #3b3a41 ;
  color: #fff;
  text-align: center;
 
}
.b2-d4 span{
  display: block;
  width: 30px;
  height: 1px;
  background-color: #fff;
  margin: 0 auto;
}
.b2-d4:hover .d4-mask{
  display: block;
}
.b2-d3{
  margin: 0 auto;
  margin-top: 47px;
  z-index: 1;
}
.d3-mask{
  margin: 0 auto;
  margin-top: 54px;
  z-index: 1;
}
.b2-d4 .z1{
  font-size: 16px;
  margin-bottom: 13px;
}
.b2-d4 .z2{
  margin-top: 13px;
  font-size: 12px;
}
.d4-mask{
  display: none;
  position: absolute;
  top: -7px;
  left: -4px;
  width: 264px;
  height: 158px;
  background-color: #668aca;
  z-index: 10;
}

  .news {
    width: 100%;
    height: 832px;
   
  }
  .room{
    width: 100%;
    height: 570px;
    margin-top: 60px;
  }
.room-l{
  position: relative;
  float: left;
  width: 570px;
  height: 570px;
margin-right: 60px;

}
.room .room1{
  float: left;
  width: 570px;
  height: 270px;
  background: url(../img/room1.jpg) no-repeat;
  margin-bottom: 30px;
}
 .room-mask{

  position: absolute;
  left: 0;
  top: 180px;
  width: 570px;
  height: 90px;
  background-color:rgba(0,0,0, .5);
  opacity: 0;
}
.room-icon{
  width: 38px;
  height: 38px;
  position: absolute;
  top: 48px;
  right: 50px;
  background: url(../img/btn-1.png) no-repeat;
}
.room .room1:hover .room-mask{
  opacity: 1;
}
.room-mask .text1{
  font-size: 16px;
  color: #fff;
  margin-top: 11px;
  margin-left: 50px;
  margin-bottom: 16px;
}
.room-mask .text2{
  font-size: 12px;
  color: #fff;
  margin-left: 50px;
  margin-bottom: 10px;
}
.room-mask .text3{
  font-size: 12px;
  color: #fff;
  margin-left: 50px;
}
.room .room2{
  float: left;
  width: 270px;
  height: 270px;
  background: url(../img/room2.jpg);
  margin-right: 30px;
}
.room .room3{
  float: left;
  width: 270px;
  height: 270px;
  background: url(../img/room3.jpg);
}
.room-r
{
  float: left;
  width: 570px;
  height: 570px;
background: url(../img/room4.jpg)no-repeat;
}

  .about {
    width: 100%;
    height: 610px;   
  }
  .about .room{
    height: 300px;
    width: 100%;
  }
  .about .map{
    float: left;
    width: 500px;
    height: 300px;
    background: url(../img/map.jpg) no-repeat;
    margin-right: 29px;
  }
  .about .text{
    float: left;
    width: 671px;
    height: 100%;
  }
  .about .text1{
    font-size: 14px;
    margin-top: 26px;
    margin-bottom: 28px;
    line-height: 25px;
  }
  .about .text2{
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 28px;
  }
  .about .text3{
    line-height: 25px;
    font-size: 14px;
  }
  .footer{
    height: 262px;
    background-color: #f7f7f7;
    margin-bottom:98px;
  }
  .foot{
    width: fit-content;
    height: 100%;
    margin: 0 auto;
  }
  .footer-1{
    float: left;
width: 128px;
height: 75px;
margin-top: 98px;
  }
  .footer-1 p{
    font-size: 16px;
    margin-bottom: 10px;
    color: #767676;
  }
  .footer-2{
    float: left;
    width: 1px;
    height: 74px;
    background-color: #e9e9e9;
    margin-top: 98px;
    margin-left: 131px;
      }
  .footer-3{
    float: left;
 width: 243px;
 height: 75px;
 margin-top: 98px;
 margin-left: 61px;
 margin-right: 131px;
 }
 .footer-3 .text1{
   font-size: 14px;
color: #767676;
 }
 .footer-3 .text2{
  font-size: 14px;
  color: #767676;
  margin-top: 16px;
  margin-bottom: 16px;
}
.footer-3 .text3{
  font-size: 14px;
  color: #767676;
}
 .footer-4{
   float: left;
  width: 1px;
  height: 74px;
  background-color: #e9e9e9;
  margin-top: 98px;
  margin-right: 61px;
}
 .footer-5{
   float: left;
  width: fit-content;
  height: 75px;
  margin-top: 98px;
     }
   .footer-5 .text1{
      font-size: 14px;
   color: #767676;
    }
    .footer-5 .text2{
     font-size: 14px;
     color: #767676;
     margin-top: 16px;
     margin-bottom: 16px;
   }
   .footer-5 .text3{
     font-size: 14px;
     color: #767676;
   }
  .foot .icon1{
    float: left;
    width: 25px;
    height: 25px;
    background: url(../img/footer1.png)no-repeat;
  }
  .foot .icon2{
    float: left;
    margin-left: 19px;
    margin-right: 19px;
    width: 25px;
    height: 25px;
    background: url(../img/footer2.png)no-repeat;
  } 
  .foot .icon3{
    float: left;
    width: 25px;
    height: 25px;
    background: url(../img/footer3.png)no-repeat;
  }